<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<%@include file= "/WEB-INF/pages/base/commImportPage.jsp" %>
<html>
<head>
    <title>任务管理</title>
    <meta charset="utf-8">
    <!--[if lt IE 9]><script src="${resourcePath}/js/comm/css3-mediaqueries.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="${resourcePath}/css/guandaoqingli/pig.css">
     <script src='${resourcePath}/js/comm/build.js' type='text/javascript'></script>
     <script src='${resourcePath}/js/comm/base_v3.0.js' type='text/javascript'></script>
	<script src='${pageContext.request.contextPath}/js/pig/addOrModify.js' type='text/javascript'></script>
	<script src="${resourcePath}/tags/uploadjs/jquery.form.js" type="text/javascript"></script>
</head>

<body class="body-pad" style="padding-bottom:100px">
	<input type="hidden" id="pagePath" value="${pageContext.request.contextPath}"/>
	<input type="hidden" id="resourcePath" value="${resourcePath}"/>
	<input type="hidden" id="gisResourcePath" value="${gisResourcePath}"/>
	<!-- 任务ID -->
	<input type="hidden" id="taskId" value="${taskId }"/>
	<!-- 修改时判断清管工具下拉还是手动输入的 flag=true表示下拉选择-->
	<input type="hidden" id="flag" value="${flag }"/>
	<!-- 清管工具 -->
	<input type="hidden" id="tool" value="${cleanTool }"/>
	
	<!-- 发球桶编号 -->
	<input type="hidden" id="fpcode" value="${pig.fromPigStr }"/>
	<!-- 收球桶编号 -->
	<input type="hidden" id="tpcode" value="${pig.toPigIdStr }"/>
	<!-- 发球桶里程 -->
	<input type="hidden" id="fpmile" value="${pig.fromMile }"/>
	<!-- 收球桶里程 -->
	<input type="hidden" id="tpmile" value="${pig.toMile }"/>
	
	<!-- 收发球筒信息 -->
	<input type="hidden" id="frompiginfo" value="${pig.frompiginfo }"/>
	<input type="hidden" id="topiginfo" value="${pig.topiginfo }"/>
	
	<input type ="hidden" id="reverse" value="${empty reverse ? '0' :reverse}"/>
<div class="html-header">
    <p class="header-title">任务管理 > <span>${title }</span></p>
    <a href="javascript:history.back(-1)" class="btn btn-w100 btn-back-icon btn-h30 back" style="top:20px"><em></em><span>返回上一级</span></a>

</div>
<div class="container-fluid warp insp-container">
    <div class="row-fluid  bg-white1">
        <div class="main clearFix">
            <div class="se-bt clearFix">
                <div class="sel w305">
                    <i class="d-name">任务名称 <span>*</span></i>
                    <input  class="input-w295" type="text" placeholder="任务名称" id="taskName" value="${taskName }"/>
                </div>
                <div class="sel w305">
                    <i class="d-name">管道名称 <span>*</span></i>
                    <div class="dropdown-list">
                        <div class="drop-list drop-list-min">
                            <div class="checked w270" id="lineDiv">
                                <c:if test="${not empty pipleLine}">
                                	<a href="javascript:void(0);" id="${pipleLine.id }">${pipleLine.name }</a>
                                </c:if>
                                <c:if test="${empty pipleLine}">
                                	<a href="javascript:void(0);" id="gdmc">管道名称</a>
                                </c:if>
                            </div>
                            <span class="down-span"></span>
                        </div>
                        <ul class="select select-min none" style="width:294px;">
                            <c:if test="${not empty allPipleLine }">
                            	<c:forEach items="${allPipleLine }" var="apl">
                            		<li onclick="getInspSegment('${apl.id}');"><a href="javascript:void(0);" id="${apl.id }">${apl.name }</a></li>
                            	</c:forEach>
                            </c:if>
                        </ul>
                    </div>
                </div>
                <div class="sel w305">
                    <i class="d-name">管段名称</i>
                    <div class="dropdown-list">
                        <div class="drop-list drop-list-min">
                            <div class="checked w270" id="segmentDiv">
                                 <c:if test="${not empty segment }">
                                	<a href="javascript:void(0);" id="${segment.id }">${segment.name }</a>
                                </c:if>
                                <c:if test="${ empty segment }">
                                	<a href="javascript:void(0);" id="jcgdmc">管段名称</a>
                                </c:if>
                            </div>
                            <span class="down-span"></span>
                        </div>
                        <ul class="select select-min none" style="width:294px;" id="inspSegment">
                            <c:if test="${not empty allSegment }">
                            	<c:forEach items="${allSegment }" var="asg">
                            		<li onclick="getMarkPoint('${asg.id}');"><a href="javascript:void(0);" id="${asg.id }">${asg.name }</a></li>
                            	</c:forEach>
                            </c:if>
                        </ul>
                    </div>
                </div>
                <div class="sel w305">
                    <i class="d-name">清管类型</i>
                    <div class="dropdown-list">
                        <div class="drop-list drop-list-min">
                            <div class="checked w270" id="cleanTypeDiv">
                                <c:if test="${not empty cleanTypeMod }">
                                		<a href="javascript:void(0);" id="${ cleanTypeMod.id}">${cleanTypeMod.name }</a>
                                	</c:if>
                                	<c:if test="${empty cleanTypeMod }">
                                		<a href="javascript:void(0);">清管类型</a>
                                	</c:if>
                            </div>
                            <span class="down-span"></span>
                        </div>
                        <ul class="select select-min none" style="width:294px;">
                            <c:if test="${not empty cleanType }">
                            	<c:forEach items="${cleanType }" var="ct">
                            		<li onclick="getCleanTool('${ct.name}');"><a href="javascript:void(0);" id="${ct.id }">${ct.name }</a></li>
                            	</c:forEach>
                            </c:if>
                        </ul>
                    </div>
                </div>
                <!-- 下拉框 -->
                <div class="sel w305" id="showCleanTool">
                    <i class="d-name">清管工具</i>
                    <div class="dropdown-list">
                        <div class="drop-list drop-list-min">
                            <div class="checked w270" id="cleanToolDiv">
                                <c:if test="${not empty cleanToolAll}">
                        			<a href="javascript:void(0);" id="${cleanToolId }">${cleanTool }</a>
                        		</c:if>
                        		 <c:if test="${ empty cleanToolAll}">
                        			<a href="javascript:void(0);" id="">清管工具</a>
                        		</c:if>
                            </div>
                            <span class="down-span"></span>
                        </div>
                        <ul class="select select-min none" style="width:294px;" id="cleanToolUl">
                            <c:if test="${not empty cleanToolAll }">
                        		<c:forEach items="${cleanToolAll }" var="cta">
                        			<li><a href="javascript:void(0);" id="${cta.ID }">${cta.NAME }</a></li>
                        		</c:forEach>
                        	</c:if>
                        </ul>
                    </div>
                </div>
                <!-- 输入框-->
                <div class="sel w305" id="showInputCleanTool">
                	<i class="d-name">清管工具</i>
               		<input type="text" style="width:297px;float:left;margin-left:0px;" value=""/>
               	</div>
                <div class="sel w305" style="width:185px">
                    <i class="d-name">计划清管时间</i>
                    <span class="time" style="float:left"><input style="width:180px;height: 29px;" id="planPagDateTime"  onclick="laydate({elem: '#planPagDateTime',min:laydate.now(),istime: true,format: 'YYYY-MM-DD hh:mm'})" class="laydate-icon" value="<c:if test="${not empty task.planPagDateTime}"><fmt:formatDate value="${task.planPagDateTime}" pattern="yyyy-MM-dd HH:mm"/></c:if>"/><em style="right: -60px;" onclick="laydate({elem: '#planPagDateTime',min:laydate.now(),istime: true,format: 'YYYY-MM-DD hh:mm'})"></em></span>
                </div>
                <div class="sel w305">
                    <i class="d-name">备注</i>
                    <input  class="input-w295" type="text" placeholder="" id="remark" value="${remark }"/>
                    <!--<em class="x-ts">*</em>-->
                </div>
                
                <div class="sel" style="width:auto;margin-bottom:10px">
                    <div class="xs-sf" >
                        <em class="fa"><img src="${resourcePath}/images/comm/fa.png" alt=""></em><span id="fromPig">${empty pig.fromValRoom ?'场站阀室':pig.fromValRoom}<input type="hidden" value="${pig.fromPig }"/></span>
                    </div>
                    <div class="switch" onclick="transPig();"></div>
                    <div class="xs-sf">
                        <em class="fa"><img src="${resourcePath}/images/comm/shou.png" alt=""></em><span id="toPig">${empty pig.toValRoom ?'场站阀室':pig.toValRoom}<input type="hidden" value="${pig.toPig }"/></span>
                    </div>
                    <div class="fj-btn">
                        <a href="javascript:void(0);" onclick="chooseFile(this);"></a>
                         <c:if test="${not empty attachList}">
			        		<c:forEach items="${attachList}" var="att">
			        			<span>${att.realName }</span>
			        		</c:forEach>
			        	</c:if>
			        	<c:if test="${empty attachList}">
			        		<span></span>
			        	</c:if>
                    </div>
                </div>
            </div>
            <div class="tab-map">
                <ul>
                    <li class="active" id="showList">列表</li>
                    <li id="showGis" onclick="showGisMap();">GIS地图</li>
                </ul>
            </div>
            <div class="l-r clearFix pad20">
                <div class="fu">
                    <div class="left tab01">
                        <div class="info-header clearFix">
                            <ul class="ul-header">
                                <li class="new-w5">
                                    <span class="table-ck">
                                         <span name="checkAll" class="check-box selected " onclick=""><i></i></span>
                                    </span></li>
                                <li class="new-w10">定标点类型</li>
                                <li class="new-w10">行政地域名称</li>
                                <li class="new-15">绝对距离(m)</li>
                                <li class="new-15">最近参考点</li>
                                <li class="new-15">相对最近参考点距离(m)</li>
                                <li class="new-15">备注</li>
                                <li class="new-15" class="no-right">GIS</li>
                            </ul>
                            <div style="overflow-y:auto;overflow-x:hidden" id="markPointDiv">
                                <c:if test="${ empty allPoint }">
	                            	<div class="no-data " style="text-align: center">
			                            <img src="${resourcePath}/images/pig/no-data.png" alt=""/>
			                        </div>
	                            </c:if>
                                <c:if test="${not empty allPoint }">
	                            	<c:forEach items="${allPoint}" var="ap" varStatus="status">
		                                <div sort="${status.index }" class="info-tr">
		                                    <ul class ="ul-header bg-white">
		                                        <li class="new-w5">
		                                    <span class="table-ck">
		                                    	<c:if test="${not empty point }">
			                                    	<c:choose>
			                                    		<c:when test="${fn:contains(point, ap.ID)}">
			                                    			<span name="checkSingle" class="check-box" onclick="" id="${ap.ID }"><i class="active"></i></span>
			                                    		</c:when>
			                                    		<c:otherwise>
			                                    			<span name="checkSingle" class="check-box selected" onclick="" id="${ap.ID }"><i></i></span>
			                                    		</c:otherwise>
			                                    	</c:choose>
		                                    	</c:if>
		                                    	<c:if test="${empty point }">
		                                    		<span name="checkSingle" class="check-box selected " onclick="" id="${ap.ID }"><i></i></span>
		                                    	</c:if>
		                                    	<input type="hidden" value="${ap.GISID }"/>
		                                    </span>
		                                        </li>
		                                        <li class="new-w10">${empty ap.TYPE?"":ap.TYPE}</li>
		                                        <li class="new-w10">${empty ap.REGIONNAME?"":ap.REGIONNAME}</li>
		                                        <li class="new-15">${empty ap.MILEAGE ? "0" : ap.MILEAGE }</li>
		                                        <li class="new-15">${empty ap.REFERENCE ? "" : ap.REFERENCE}</li>
		                                        <li class="new-15">${empty ap.DISTANCE ? "0" : ap.DISTANCE}</li>
		                                        <li class="new-15">${empty ap.REMARK ? "" : ap.REMARK}</li>
		                                        <li class="new-15 no-right" ><a class="d-gis" onclick="showSinglePointOnMap(this);"></a></li>
		                                        <input type="hidden" name="lng" value="${ap.LNG }"/>
		                                        <input type="hidden" name="lat" value="${ap.LAT }"/>
		                                        <input type="hidden" name="code" value="${ap.CODE }"/>
		                                        <input type="hidden" name="name" value="${ap.NAME }"/>
		                                        <input type="hidden" name="regionName" value="${ap.REGIONNAME }"/>
		                                        <input type="hidden" name="recorder" value="${ap.RECORDER }"/>
		                                        <input type="hidden" name="recordtime" value="<fmt:formatDate value="${ap.RECORDTIME }" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
                                                <input type="hidden" name="customNumber" value="${ap.CUSTOMNUMBER }"/>
                                            </ul>
		                                </div>
	                                </c:forEach>
	                            </c:if>
                            </div>
							
                        </div>
                        <div style="clear:both"></div>
                        <a href="javascript:;" onclick="saveTask();" class="btn btn-w100 btn-save-icon btn-h30" style="float:right;margin-top:20px;margin-right:15px"><em></em>确认</a>
                    </div>
                    <div class="left tab01 none">
                        <div class="map1">
                             <iframe id="frameId" style="width: 100%;height: 550px;" >
                          </iframe>
                        </div>
                        <div class="swiper">
                            <div class="ss" style="margin-left:-49.5%" id="aa">
                                <ul id="showPoint" >
                                    
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <form id="form1" method="post" enctype="multipart/form-data">
        	<input style="display:none" name="file" type="file" id="file" onchange="changeFile(this);"/>  
        	
        	<input type="hidden" name="taskId"/>
        	<input type="hidden" name="taskName"/>
        	<input type="hidden" name="lineId"/>
        	<input type="hidden" name="segmentId"/>
        	<input type="hidden" name="markPoint"/>
        	<input type="hidden" name="fromPigStr"/>
        	<input type="hidden" name="toPigIdStr"/>
        	<input type="hidden" name="remark"/>
        	<input type="hidden" name="planPagDateTime"/>
        	<input type="hidden" name="pigType"/>
        	<input type="hidden" name="type"/>
        	<input type="hidden" name="reverse"/>
        </form>
    </div>
</div>
<script type="text/javascript">
$(function(){
    $('.tab-map li').each(function(i){
        $(this).on('click',function(){
            $(this).addClass('active');
            $(this).siblings().removeClass('active')
            $('.fu .tab01').eq(i).removeClass('none')
            $('.fu .tab01').eq(i).siblings().addClass('none')
        })
    })
})

    
        /**
     *
     * @param num 参考点个数
     */
	function swiperWidth(num)
	{
	    var dg=170;//点到点的宽度
	    var dd=36;//非起始点宽度
	    var qz=50;//起点 终端宽度
	
	    var width=100;
	    width+=(num-1)*dg;
	    width+=(num-2)*dd;
	    width+=2*qz;
	
	    $(".ss").css("width",width);
	
	}
	$(function(){
	    $(".swiper").css("width",$(".main").width());
	    //swiperWidth($("#aa .sl").length+2);
	    //swiperWidth($("#bb .sl").length+2);
	})
</script>
</body>
</html>